<template>
  <view class="main-view">
    <view class="content-view">
      <view id="poster-dome" style="padding: 30rpx;">
        <view class="plan-top">

          <view class="recommend-ratio-view"><text>回报{{ detailData.recommendRatio }}倍</text></view>
          <view style="display: flex;justify-content: space-between;">
            <text>投注</text>
            <text style="color: red;font-weight: bold;font-size: 36rpx;">金额{{ detailData.recommendMoney }}元</text>
          </view>
          <view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
            <text>预计开奖时间：{{ detailData.matchDateTime }}</text>
          </view>
          <view>
            <view style="margin-top: 20rpx;" v-if="type === 'ttg'">
              <text>进球数 </text>
              <text style="color: red;font-weight: bold;font-size: 36rpx;margin-left: 20rpx;">{{
            detailData.recommendFlag }}</text>
            </view>
            <view style="margin-top: 20rpx;" v-if="type === 'had'">
              <text>胜平负 </text>
            </view>
            <view style="margin-top: 20rpx;">
              <text v-if="type === 'hilo'">{{ tcTypeText[detailData.tcType] }} </text>
              <template v-if="detailData.bettingSingle">
                <text v-if="type !== 'hilo'">竞足过关</text>
                <text style="color: red;font-weight: bold;font-size: 36rpx;margin-left: 20rpx;">单关</text>
              </template>

            </view>
          </view>
        </view>
        <view class="plan-view">
          <view class="plan-left">
            <text class="plan-name text-line-1" style="max-width: 130rpx;">{{ detailData.leagueName }}</text>
            <text class="plan-str">{{ detailData.matchStr }}</text>
          </view>
          <view class="plan-right">
            <view class="recommend-ratio" v-if="type === 'hilo'">
              {{ detailData.tcLine }}
            </view>
            <!-- <view class="recommend-ratio" v-if="type === 'ttg'">
              {{ detailData.recommendRatio }}
            </view> -->
            <view style="flex: 1;">
              <view class="p-right-top">
                <text class="p-item-t ">{{ detailData.tcHomeName }}</text>
                <text class="p-item-t" style="font-weight: bold;font-size: 28rpx;">{{ detailData.sectionsCore || 'VS'
                  }}</text>
                <text class="p-item-t">{{ detailData.tcAwayName }}</text>
              </view>
              <view class="p-right-bottom" v-if="type === 'hilo'">

                <view class="p-item" :class="{ 'active': detailData.recommendFlag === 'H' }">{{ detailData.tcType ===
            'HDC' ? '让分主胜' : '大' }}
                  {{
            detailData.tcHRatio
          }}
                </view>
                <view class="p-item"
                  :class="{ 'active': detailData.recommendFlag === 'A' || detailData.recommendFlag === 'L' }">{{
            detailData.tcType ===
              'HDC' ? '让分主负' : '小' }} {{ detailData.tcLRatio
                  }}
                </view>
              </view>
              <view v-else-if="type === 'ttg'" class="p-right-bottom">
                <view class="p-item">
                  {{ detailData.recommendFlag }}球
                </view>
                <view class="p-item">
                  {{ detailData.recommendRatio }}
                </view>
              </view>
              <view v-else class="p-right-bottom">
                <view class="p-item" :class="{ 'active': detailData.recommendFlag === 'H' }">胜 {{ detailData.tcHRatio }}
                </view>
                <view class="p-item" :class="{ 'active': detailData.recommendFlag === 'D' }">平 {{ detailData.tcDRatio }}
                </view>
                <view class="p-item" :class="{ 'active': detailData.recommendFlag === 'A' }">负 {{
            detailData.tcARatio }}
                </view>
              </view>
            </view>

          </view>
        </view>
        <view style="margin-top: 20rpx;">
          <text>方案保存时间：{{ detailData.updateTime }}</text>
          <view class="desc-view">
            <view class="desc-item" style="margin-top: 20rpx;" v-for="item in descText[type]">
              {{ item }}
            </view>
          </view>
        </view>
      </view>
      <u-popup :round="20" :show="show" @close="show = false" mode="center">
        <view class="poster-view">
          <image :src="posterImg" mode="widthFix"></image>
          <text class="poster-text">长按保存图片</text>
        </view>
      </u-popup>
    </view>
    <view class="btn-view">
      <button type="primary" @click="getPoster">分享图片</button>
    </view>

  </view>
</template>

<script>
import { planList } from '@/common/api/home'
import html2canvas from 'html2canvas';
import itemView from '@/components/home/itemView.vue';
export default {
  components: {
    itemView
  },
  data () {
    return {
      tcTypeText: {
        HDC: '让分胜负',
        HILO: '大小分'
      },
      descText: {
        // 足球赔率差
        had: [
          '足球竞猜的是全场90分钟 (含伤停补时)的赛果，不含加时赛和点球大战。',
          '投注数据、奖金仅供参考，请以实票数据为准'
        ],
        // 单边进球数
        ttg: [
          '足球竞猜的是全场90分钟 (含伤停补时)的赛果，不含加时赛和点球大战。',
          '投注数据、奖金仅供参考，请以实票数据为准'],
        // 篮球盘口差
        hilo: [
          '篮球竞猜的是在全场(含加时赛)的比赛结果进行投注。',
          '投注数据、奖金仅供参考，请以实票数据为准'
        ]
      },
      show: false,
      posterImg: '',
      loading: true,
      detailData: '',
      params: {

        id: null
      }
    }
  },
  onLoad (option) {
    console.log(option)
    console.log(option)
  },
  onLoad (option) {
    this.params.id = option.id
    this.type = option.type
    console.log(option)
    console.log(option)
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    getPoster () {
      html2canvas(document.getElementById(`poster-dome`), {
        backgroundColor: '#f5f5f5',
        useCORS: true,
        allowTaint: true,
        scale: window.devicePixelRatio,
        // dpi: window.devicePixelRatio
      }).then(canvas => {
        let imgurl = canvas.toDataURL('image/png');
        this.posterImg = imgurl
        this.show = true
        console.log(imgurl)
      }).catch(err => {
        console.log(err)
      })
    },
    getDataList () {
      this.loading = true
      planList(`${this.type}-child-info`, this.params).then(res => {
        console.log(res)
        this.loading = false
        this.detailData = res.data
      })
    },
    sectionChange (index) {
      switch (index) {
        case 0:
          this.params.matchStatus = "U"
          break;
        case 1:
          this.params.matchStatus = "P"
          break;
        case 2:
          this.params.matchStatus = "O"
          break
      }
      console.log(index)
      this.curNow = index;
      this.getDataList()
    }
  }
}
</script>
<style lang="less" scoped>
.poster-view {
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .poster-text {
    margin-top: 40rpx;
    color: #999;
    font-size: 24rpx;
  }
}

.main-view {
  height: 100%;
  display: flex;
  flex-direction: column;

  .content-view {
    flex: 1;
  }

  .btn-view {
    padding: 30rpx;
  }

  .recommend-ratio {
    display: flex;
    height: 80rpx;
    color: red;
    font-weight: bold;
    align-items: center;
    margin-right: 4rpx;
    // position: absolute;
  }

  .p-right-bottom {
    display: flex;
    border: 2rpx solid #fff;
    margin-top: 20rpx;
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;



    .p-item {
      flex: 1;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #f5f5f5;
      font-size: 24rpx;

      &.active {
        background-color: red;
        color: #fff;
      }

      &:nth-child(2) {
        border: 2rpx solid #fff;
        border-top: none;
        border-bottom: none;
      }
    }

  }

  .plan-top {
    display: flex;
    justify-content: space-between;
    padding: 40rpx 30rpx 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background-color: #fff;
    border-radius: 16rpx;
    flex-direction: column;
    margin-bottom: 20rpx;
    position: relative;

    .recommend-ratio-view {
      position: absolute;
      font-size: 24rpx;
      right: 0;
      top: 0;
      background-color: rgba(145, 139, 139, 0.8);
      color: #fff;
      border-radius: 0 16rpx 0 16rpx;
      padding: 5rpx 10rpx;
    }
  }

  .plan-view {
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background-color: #fff;
    border-radius: 16rpx;

    .plan-left {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .plan-name {
        color: #7f2a2a;
        font-size: 24rpx;
      }

      .plan-str {
        margin-top: 10rpx;
      }

      text {
        font-size: 24rpx;
      }
    }

    .plan-right {
      display: flex;
      flex: 1;
      align-items: flex-end;
      margin-left: 40rpx;

      .p-right-top {
        display: flex;
        justify-content: space-between;

        .p-item-t {
          flex: 1;
          display: flex;
          font-size: 24rpx;
          color: #3d8ce6;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
